<template>
    <div>
        <!-- Start Featured Slider -->

        <div id="kestra">

            <a href="https://kestra.io" target="_blank">
                Discover <img height="22px" src="https://kestra.io/logo.svg" alt="" />, infinitely scalable open source orchestration & scheduling platform.
            </a>
        </div>

        <section id="mu-hero">
            <div class="container">
                <div class="row">

                    <div class="col-md-6 col-sm-6 col-sm-push-6">
                        <div class="mu-hero-right">
                            <a rel="noopener noreferrer" href="/assets/images/preview.jpg" data-fancybox="gallery">
                                <img src="/assets/images/preview.jpg" alt="AKHQ preview">
                            </a>
                        </div>
                    </div>

                    <div class="col-md-6 col-sm-6 col-sm-pull-6">
                        <div class="mu-hero-left">
                            <h1>Manage & view data inside your Apache Kafka<sup>&nbsp;&#174;</sup> cluster</h1>
                            <p>Kafka GUI for Apache Kafka<sup>&nbsp;&#174;</sup> to manage topics, topics data, consumers
                                group, schema registry,
                                connect and more...</p>
                            <a href="/docs/"
                               class="mu-primary-btn">Documentation</a>
                            <a href="https://github.com/tchiotludo/akhq/releases"
                               class="mu-primary-btn mu-primary-outline-btn">Download</a>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- Start Featured Slider -->

        <!-- Start main content -->

        <main role="main">

            <!-- Start Who's Using -->
            <section id="mu-using">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mu-using-area">
                                <div class="mu-using-block">
                                    <div class="row">
                                        <h2 class="mu-using-title">Who's using AKHQ</h2>
                                        <span class="mu-header-dot"></span>
                                        <div class="mu-using-row row ">
                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/adeo.png" alt="Adeo">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/auchan-retail.jpg" alt="Auchan Retail">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/baloise.png" alt="Baloise">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/barmer.png" alt="Barmer">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/bell.png" alt="Bell">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/bestbuy.jpg" alt="Best Buy">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/bmw.png" alt="Bmw">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/booking.svg" alt="Booking">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/boulanger.jpg" alt="Boulanger">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/BPCE.jpg" alt="BPCE">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/decathlon.svg" alt="Decathlon">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/depop.png" alt="Decathlon">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/lafayette.jpg" alt="Galerie Lafayette">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/get-your-guide.png" alt="Get Your Guide">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/gladly.svg" alt="Gladly">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/iadvize.png" alt="iAdvize">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/indeed.svg" alt="Indeed">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/klarna.png" alt="Klarna">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/la-redoute.jpg" alt="La Redoute">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/leroy-merlin.svg" alt="Leroy Merlin">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/maif.svg" alt="ManoMano">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/manomano.svg" alt="ManoMano">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/michelin.svg" alt="Michelin">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/next.webp" alt="Next">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/nuxeo-platform.png" alt="Nuxeo">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/pagerduty.svg" alt="PagerDuty">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/pipedrive.png" alt="Pipedrive">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/tui.png" alt="TUI">
                                                </div>
                                            </div>

                                            <div class="col-md-2 col-sm-4 col-6">
                                                <div class="mu-single-using">
                                                    <img src="/assets/images/using/tvg.png" alt="TVG">
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </section>
            <!-- End Who's Using -->

            <!-- Start Kafka Overview -->
            <section id="mu-book-overview">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mu-book-overview-area">

                                <div class="mu-heading-area">
                                    <h2 class="mu-heading-title">AKHQ Overview</h2>
                                    <span class="mu-header-dot"></span>
                                    <p>Enabling your teams to search and explore data in a unified console, while supporting
                                        its administration and integration within your ecosystem.</p>
                                </div>

                                <!-- Start Book Overview Content -->
                                <div class="mu-book-overview-content">
                                    <div class="row">

                                        <!-- Book Overview Single Content -->
                                        <div class="col-md-3 col-sm-6">
                                            <div class="mu-book-overview-single">
											<span class="mu-book-overview-icon-box">
												<i class="fa fa-sitemap" aria-hidden="true"></i>
											</span>
                                                <h4>Central</h4>
                                                <p>Multi-Cluster vision into a central console, available in Multi-Cloud
                                                    environments.</p>
                                            </div>
                                        </div>
                                        <!-- / Book Overview Single Content -->

                                        <!-- About Us Single Content -->
                                        <div class="col-md-3 col-sm-6">
                                            <div class="mu-book-overview-single">
											<span class="mu-book-overview-icon-box">
												<i class="fa fa-users" aria-hidden="true"></i>
											</span>
                                                <h4>Explore</h4>
                                                <p>Enabling users to access, search and get insights from your topics,
                                                    including Live Tail.</p>
                                            </div>
                                        </div>
                                        <!-- / Book Overview Single Content -->

                                        <!-- About Us Single Content -->
                                        <div class="col-md-3 col-sm-6">
                                            <div class="mu-book-overview-single">
											<span class="mu-book-overview-icon-box">
												<i class="fa fa-cubes" aria-hidden="true"></i>
											</span>
                                                <h4>Manage</h4>
                                                <p>Allowing to manage your topics, consumer groups, cluster
                                                    configurations, users and ACLs.</p>
                                            </div>
                                        </div>
                                        <!-- / Book Overview Single Content -->

                                        <!-- About Us Single Content -->
                                        <div class="col-md-3 col-sm-6">
                                            <div class="mu-book-overview-single">
											<span class="mu-book-overview-icon-box">
												<i class="fa fa-thumbs-up" aria-hidden="true"></i>
											</span>
                                                <h4>Integration</h4>
                                                <p>Compatibility with LDAP, RBAC, Schema Registry, Kafka Connect and
                                                    more.</p>
                                            </div>
                                        </div>
                                        <!-- / Book Overview Single Content -->


                                    </div>
                                </div>
                                <!-- End Book Overview Content -->

                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- End Kafka Overview -->

            <!-- Start Video Review -->
            <section id="mu-video-review">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mu-video-review-area">

                                <div class="mu-heading-area">
                                    <h2 class="mu-heading-title">Check Out In Video</h2>
                                    <span class="mu-header-dot"></span>
                                </div>

                                <!-- Start Video Review Content -->
                                <div class="mu-video-review-content text-center">
                                    <video autoplay controls muted="" poster="/assets/images/preview.jpg">
                                        <source src="/assets/images/video.webm" type="video/webm">
                                        <source src="/assets/images/video.mp4" type="video/mp4">
                                        Your browser does not support the video tag.
                                    </video>
                                </div>
                                <!-- End Video Review Content -->

                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- End Video Review -->

            <!-- Start Testimonials -->
            <section id="mu-testimonials">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mu-testimonials-area">
                                <div class="mu-heading-area">
                                    <h2 class="mu-heading-title">What Our Users Says</h2>
                                    <span class="mu-header-dot"></span>
                                </div>

                                <div class="row col-md-12">
                                    <div class="col-md-4">
                                        <p>"AKHQ is an awesome toolbox for both developers and devops to observe and
                                            troubleshoot daily our Kafka architecture."</p>
                                        <h5 class="mu-rt-name">Sébastien Nahelou - <span class="mu-rt-title">Adeo</span></h5>

                                    </div>

                                    <div class="col-md-4">
                                        <p>"We used AKHQ on three different production clusters.
                                            It helped us a lot to monitor our consumer groups and facilitated the
                                            clients migration."</p>
                                        <h5 class="mu-rt-name">François Blarel - <span class="mu-rt-title">Decathlon</span></h5>

                                    </div>

                                    <div class="col-md-4">
                                        <p>"AKHQ is facilitating the adoption and usage of Apache Kafka internally, for
                                            the diverse people accessing it. We believe and actively support the product
                                            for this reason."</p>
                                        <h5 class="mu-rt-name">Antoine Craske - <span class="mu-rt-title">La Redoute</span></h5>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- End Testimonials -->

            <!-- Start About Us -->
            <section id="mu-about">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mu-about-area">

                                <div class="mu-heading-area">
                                    <h2 class="mu-heading-title">About Us</h2>
                                    <span class="mu-header-dot"></span>
                                </div>

                                <!-- Start About Content -->
                                <div class="mu-about-content">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="mu-about-info">

                                                    <h3>Project Leader</h3>

                                                    <img class="mu-rt-img" src="/assets/images/ludovic.jpg" alt="img">
                                                    <h6>Ludovic DEHON</h6>

                                                    <div class="mu-about-social">
                                                        <a href="https://twitter.com/tchiotludo"
                                                           target="_blank"><i class="fa fa-twitter"></i></a>
                                                        <a href="https://www.linkedin.com/in/ludovic-dehon-60886530/"
                                                           target="_blank"><i class="fa fa-linkedin"></i></a>
                                                    </div>


                                                </div>
                                            </div>
                                            <div class="col-md-9">
                                                <div class="mu-about-info">
                                                    <h3>Top Contributors</h3>
                                                    <div v-html="contributors">

                                                    </div>

                                                    <p>See the list on
                                                        <a href="https://github.com/tchiotludo/akhq/graphs/contributors"
                                                           target="_blank"
                                                           class="mu-about-info-contributors">GitHub insights</a>.</p>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="row">
                                            <div class="mu-about-info">
                                                <h3>Companies Supporting AKHQ</h3>
                                                <p>These support consists in providing time for contribution to core
                                                    contributors.</p>
                                                <div class="mu-about-info-companies text-center">
                                                    <span class="mu-about-image">
                                                        <a href="https://maif.github.io/?utm_source=AKHQ" target="_blank">
                                                            <img aria-hidden="true"
                                                                style="width:210px"
                                                                src="/assets/images/maif.svg" alt="MAIF">
                                                        </a>
                                                    </span>
                                                    <span class="mu-about-image">
                                                        <a href="https://infosupport.com/?utm_source=AKHQ" target="_blank">
                                                            <img aria-hidden="true"
                                                                 style="width:210px"
                                                                 src="/assets/images/logo-infosupport.svg" alt="Info Support">
                                                        </a>
                                                    </span>
                                                    <span class="mu-about-image">
                                                        <a href="https://www.michelin.fr/?utm_source=AKHQ" target="_blank">
                                                            <img aria-hidden="true"
                                                                style="width:210px"
                                                                src="/assets/images/using/michelin.svg" alt="Michelin">
                                                        </a>
                                                    </span>
                                                    <span class="mu-about-image">
                                                        <a href="https://www.laredoute.fr/?utm_source=AKHQ" target="_blank">
                                                            <img aria-hidden="true"
                                                                 style="width:210px"
                                                                 src="/assets/images/using/la-redoute.jpg" alt="La Redoute">
                                                        </a>
                                                    </span>
                                                    <span class="mu-about-image">
                                                        <a href="https://polarising.com/?utm_source=AKHQ" target="_blank">
                                                            <img aria-hidden="true"
                                                                 style="width:210px"
                                                                 src="/assets/images/polarising.png" alt="Polarising">
                                                        </a>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- End About Content -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- End About Us -->

        </main>

        <!-- End main content -->


        <!-- Start footer -->
        <footer id="mu-footer" role="contentinfo">
            <div class="container">
                <div class="mu-footer-area">
                    <div class="mu-social-media">
                        <a href="https://www.facebook.com/PolarisingITServices/"
                           target="_blank"><i class="fa fa-facebook"></i></a>
                        <a href="https://www.linkedin.com/company/polarising/"
                           target="_blank"><i class="fa fa-linkedin"></i></a>
                    </div>
                    <p class="mu-copyright">Designed by <a rel="nofollow" href="http://polarising.com" target="_blank">Polarising
                        Labs</a>.</p>
                    <p class="mu-copyright">Apache, <a href="https://kafka.apache.org/" target="_blank">Apache Kafka</a>, <a
                        href="https://kafka.apache.org/"
                        target="_blank">Kafka</a>, and associated open source project names are trademarks of the <a
                        href="https://www.apache.org/"
                        target="_blank">Apache Software Foundation</a>. AKHQ is not affiliated with, endorsed by, or
                        otherwise associated with the Apache Software.</p>
                </div>
            </div>

        </footer>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "Index",
    components: {
    },
    data() {
        return {
            contributors: "",
        };
    },
    computed: {
    },
    created() {
        axios.get("/contributors.html")
            .then(value => {
                this.contributors = value.data;
            })
            .catch(reason => {
                console.error(reason);
            })
    },
    methods: {
    }
};
</script>


<style lang="scss">
@import "../styles/variable";
.landing {
    @import "../styles/home/style";
    @import "../styles/home/akhq-theme";
    .vp-navbar {
        margin-top: 29px;
    }
}

#kestra {
    z-index: 1000;
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 4px;
    text-align: center;
    background: $teal;
    cursor: pointer;

    a {
        color: darken($teal, 25%);
    }
}

</style>
